<template>
  <div class="NewmusicIndex">
    <!-- tab切换 -->
    <div class="tabs">
      <div class="tab">
        <span
          :class="{ active: active == tabText[0] }"
          @click="tabsClick(tabText[0])"
          >{{ tabText[0] }}</span
        >
        <span
          :class="{ active: active == tabText[1] }"
          @click="tabsClick(tabText[1])"
          >{{ tabText[1] }}</span
        >
      </div>
    </div>
    <!-- 内容显示区域 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "NewmusicIndex",
  components: {},
  props: {},
  data() {
    return {
      tabText: ["新歌速递", "新碟上架"],
      active: "新歌速递"
    };
  },
  computed: {},
  watch: {
    $route() {}
  },
  created() {
    if (this.$route.name == "musicCourier") {
      this.active = this.tabText[0];
    } else {
      this.active = this.tabText[1];
    }
  },
  mounted() {},
  methods: {
    // tab切换
    tabsClick(text) {
      this.active = text;
      if (text == this.tabText[0]) {
        this.$router.push({
          name: "musicCourier"
        });
      } else if (text == this.tabText[1]) {
        this.$router.push({
          name: "newDisc"
        });
      }
    }
  }
};
</script>

<style scoped lang="scss">
.NewmusicIndex {
  padding: 0 9.375rem;
  .tabs {
    width: 100%;
    text-align: center;
    margin-bottom: 1.875rem;
    .tab {
      width: 13.75rem;
      height: 1.875rem;
      margin: 0 auto;
      border: 0.0625rem solid #ccc;
      border-radius: 1.25rem;
      cursor: pointer;
      span {
        display: inline-block;
        width: 6.875rem;
        border-radius: 1.25rem;
        height: 1.875rem;
        line-height: 1.875rem;
        text-align: center;
      }
      .active {
        background: #ccc;
        color: #fff;
      }
    }
  }
}
</style>
